<template>
  <!--tabbar只显示的页面-->
  <div v-if="$route.path == '/home' ||
          $route.path == '/shoppingMall/mallHome' ||
          $route.path == '/investmentprojects' ||
          $route.path == '/membercenter'">
    <van-tabbar v-model="active" active-color="#58bca7" fixed inactive-color="#cfd1d2" placeholder>
      <van-tabbar-item v-for="(item, index) in tabbars" :key="index" :to="item.path">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <i :class="props.active ? item.active : item.normal" class="iconfont"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbars: [
        {
          path: "/home",
          title: "首页",
          normal: "icon-shouye",
          active: "icon-index-select"
        },
        {
          path: "/shoppingMall/mallHome",
          title: "果园",
          normal: "icon-shangcheng1",
          active: "icon-shangcheng"
        },
        {
          path: "/investmentprojects",
          title: "投资项目",
          normal: "icon-gongyihuodong",
          active: "icon-gongyi"
        },
        {
          path: "/membercenter",
          title: "会员中心",
          normal: "icon-wode1",
          active: "icon-wode"
        }
      ]
    };
  },
  watch: {
    //监听路由变化
    $route(to) {
      this.tabbarActive(to.path);
    }
  },
  methods: {
    tabbarActive(path) {
      var index = this.tabbars.map(item => item.path).indexOf(path);
      if (index != -1) {
        this.active = index;
      }
    }
  }
};
</script>

<style lang="less" scoped></style>